<template>
  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="院校名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入院校名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="地区" prop="placeId">
        <el-select v-model="queryParams.placeId" placeholder="请选择地区" clearable :filterable="false">
          <el-option
            v-for="dict in dict.type.place"
            :key="dict.value"
            :label="dict.label"
            :value="Number(dict.value)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="培养计划" prop="eduPlanId">
        <el-select v-model="queryParams.eduPlanId" placeholder="请选择培养计划" clearable :filterable="false">
          <el-option
            v-for="dict in dict.type.edu_plans"
            :key="dict.value"
            :label="dict.label"
            :value="Number(dict.value)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="大学标签" prop="tags">
        <el-input
          v-model="queryParams.tags"
          placeholder="请输入标签关键词"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['degree:schools:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['degree:schools:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['degree:schools:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['degree:schools:export']"
        >导出</el-button>
      </el-col>
            <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-upload"
          size="mini"
          @click="chooseExcel"
          v-hasPermi="['degree:schools:admin']"
        >导入</el-button>
        <input
          ref="excelInput"
          type="file"
          accept=".xls,.xlsx"
          style="display:none"
          @change="handleFileChange"
        />
      </el-col>
       <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-upload"
          size="mini"
          @click="importPics"
          v-hasPermi="['degree:schools:admin']"
        >导入图片</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="schoolsList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="院校名称" align="center" prop="name" />
      <el-table-column label="院校图片" align="center" prop="pics" width="100">
        <template slot-scope="scope">
          <image-preview :src="scope.row.pics"/>
        </template>
      </el-table-column>
      <el-table-column label="是否热门" align="center" prop="isHot">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isHot" :active-value="1" :inactive-value="0" @change="toggleHot(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="地区" align="center" prop="placeId">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.place" :value="scope.row.placeId"/>
        </template>
      </el-table-column>
      <el-table-column label="培养计划类型" align="center" prop="eduPlanId">
        <template slot-scope ="scope">
          <dict-tag :options="dict.type.edu_plans" :value="scope.row.eduPlanId"/>
        </template>
      </el-table-column>
      <el-table-column label="大学标签" align="center" prop="tags" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.tags && scope.row.tags.trim() !== ''" class="tags-display">{{ scope.row.tags }}</span>
          <span v-else style="color: #999;">暂无标签</span>
        </template>
      </el-table-column>
      <el-table-column label="是否显示" align="center" prop="isShow">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isShow" :active-value="1" :inactive-value="0" @change="toggleShow(scope.row)" />
        </template>
      </el-table-column>
       <el-table-column label="pdf上传" align="center" prop="pdfUrl">
        <template slot-scope="scope">
          <!--判断pdf是否为空，如果为空则显示未上传-->
          <span v-if="scope.row.pdfUrl && scope.row.pdfUrl.trim() !== ''">
            <el-link :href="scope.row.pdfUrl" :underline="false" target="_blank">查看PDF</el-link>
          </span>
          <span v-else style="color: #999;">未上传</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['degree:schools:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['degree:schools:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改大学信息列表展示对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1200px" height="80vh" append-to-body :custom-class="'school-dialog school-dialog-' + schoolId">
      <el-tabs 
        type="border-card" 
        v-model="activeTabName" 
        @tab-click="handleTabClick"
        :before-leave="handleBeforeLeave"
      >
        <el-tab-pane label="基本信息" name="0">
          <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="school-base-form">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="大学名称" prop="name">
                  <el-input v-model="form.name" placeholder="请输入大学名称" />
                </el-form-item>
              </el-col>
               <el-col :span="12">
                <el-form-item label="官网" prop="website">
                  <el-input v-model="form.website" placeholder="请输入官网网址" />
                </el-form-item>
              </el-col>
             
              <el-col :span="12">
                <el-form-item label="所在地区" prop="placeId">
                  <el-select v-model="form.placeId" placeholder="请选择地区" style="width: 100%" :filterable="false">
                    <el-option v-for="dict in dict.type.place" :key="dict.value" :label="dict.label" :value="Number(dict.value)" />
                  </el-select>
                </el-form-item>
              </el-col>
               <el-col :span="12">
                <el-form-item label="城市" prop="cityName">
                  <el-input v-model="form.cityName"  placeholder="请输入申请材料要求" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="申请截止日期" prop="endDate">
                  <el-date-picker clearable v-model="form.endDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择申请截止日期" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="标签(逗号分割)" prop="tags">
                  <el-input v-model="form.tags" placeholder="标签之间用英文逗号分隔" clearable />
                </el-form-item>
              </el-col>
               <el-col :span="12">
                <el-form-item label="培养计划类型" prop="eduPlanId">
                  <el-select v-model="form.eduPlanId" placeholder="请选择培养计划类型" style="width: 100%" :filterable="false">
                    <el-option v-for="dict in dict.type.edu_plans" :key="dict.value" :label="dict.label" :value="Number(dict.value)" />
                  </el-select>
                </el-form-item>
              </el-col>
             
              <el-col :span="12">
                <el-form-item label="申请材料要求" prop="documents">
                  <el-input v-model="form.documents"  placeholder="请输入申请材料要求" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
               <el-col :span="12">
                <el-form-item label="院校简介" prop="intro">
                  <!-- <el-input v-model="form.intro" type="textarea" :rows="3" placeholder="请输入简介" /> -->
                   <el-button size="mini" type="primary" @click="openIntroEditor">编辑简介</el-button>
                </el-form-item>
                </el-col>

                   <el-col :span="12">
                     <el-form-item label="pdf文件上传" prop="pdfUrl">
                  <!-- <el-input v-model="form.intro" type="textarea" :rows="3" placeholder="请输入简介" /> -->
                    <file-upload v-model="form.pdfUrl"/>
                </el-form-item>

                   </el-col>
              </el-col>
              
              <el-col :span="24">
                <el-row :gutter="0" style="align-items: flex-start;">
                  <el-col :span="12">
                    <el-form-item label="Logo" prop="logo">
                      <image-upload v-model="form.logo" :limit="1" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" style="display: flex; align-items: flex-start;">
                    <el-form-item label="背景图片(推荐宽度340px，高度230px)" prop="pics" style="flex:1; margin-left: -40px; min-width: 360px;">
                      <image-upload v-model="form.pics" :limit="5" />
                    </el-form-item>
                  </el-col>
                  
                </el-row>
              </el-col>

               <el-col :span="24">
                    <el-form-item label="预约背景图片" prop="reserveBg" style="flex:1;">
                      <image-upload v-model="form.reserveBg" :limit="1" />
                    </el-form-item>
                  
                </el-col>

              <el-col :span="24">
                <div style="display: flex; align-items: center;">
                  <!-- <el-form-item label="是否热门" prop="isHot" style="margin-bottom: 0;">
                    <el-switch v-model="form.isHot" :active-value="1" :inactive-value="0" />
                  </el-form-item> -->
                  <div style="width:50px;"></div>
                  <el-form-item label="是否显示" prop="isShow" style="margin-bottom: 0;">
                    <el-switch v-model="form.isShow" :active-value="1" :inactive-value="0" />
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
          <!-- 院系标签页 -->
        <el-tab-pane name="3" :class="{'tab-disabled': !schoolId || schoolId === 0}">
          <span slot="label">院系管理</span>
          <div v-if="schoolId > 0">
            <Department :schoolId="schoolId" ref="departmentsRef" />
          </div>
          <div v-else style="text-align: center; padding: 50px; color: #999;">
            请先保存基本信息
          </div>
        </el-tab-pane>
        <!-- 培养计划标签页 -->
        <el-tab-pane name="1" :class="{'tab-disabled': !schoolId || schoolId === 0}">
          <span slot="label">专业管理</span>
          <div v-if="schoolId > 0">
            <Professions :schoolId="schoolId" ref="professionsRef" />
          </div>
          <div v-else style="text-align: center; padding: 50px; color: #999;">
            请先保存基本信息
          </div>
        </el-tab-pane>
        <!-- 院校视频标签页 -->
        <el-tab-pane name="2" :class="{'tab-disabled': !schoolId || schoolId === 0}">
          <span slot="label">院校视频</span>
          <div v-if="schoolId > 0">
            <Videos :schoolId="schoolId" ref="videosRef" />
          </div>
          <div v-else style="text-align: center; padding: 50px; color: #999;">
            请先保存基本信息
          </div>
        </el-tab-pane>
        <!-- 顾问留言标签页 -->
        <el-tab-pane name="4" :class="{'tab-disabled': !schoolId || schoolId === 0}">
          <span slot="label">顾问留言</span>
          <div v-if="schoolId > 0">
            <Mentors :schoolId="schoolId" ref="mentorsRef" />
          </div>
          <div v-else style="text-align: center; padding: 50px; color: #999;">
            请先保存基本信息
          </div>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="cancel">返回</el-button>
      </div>
    </el-dialog>

   <!--弹窗编辑器-->
  <el-dialog
      title="编辑院校简介"
      :visible.sync="introEditorVisible"
      width="1000px"
      append-to-body
    >
      <MiniEditor
        v-model="introContent"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="introEditorVisible = false">取消</el-button>
        <el-button type="primary" @click="saveIntro">保存</el-button>
      </span>
    </el-dialog>
  </div>  
</template>

<script>
import { listSchools, getSchools, delSchools, addSchools, updateSchools, toggleHot, toggleShow ,importSchoolsExcel,importSchoolPics,exportSchools} from "@/api/degree/schools"
import Professions from "@/views/degree/schools/components/professions.vue"
import Videos from "@/views/degree/schools/components/videos.vue"
import Department from "@/views/degree/schools/components/department.vue"
import Mentors from "@/views/degree/schools/components/mentors.vue"
import MiniEditor from "@/views/degree/schools/components/mini_editor.vue"
export default {
  components: {
    Professions,
    Videos,
    Department,
    Mentors,
    MiniEditor
  },
  name: "Schools",
  dicts: ['place', 'edu_plans'],
  data() {
    return {
      // 遮罩层
      loading: true,
      //schoolId
      schoolId: 0,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 大学信息列表展示表格数据
      schoolsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 当前激活的标签页
      activeTabName: '0',
      introEditorVisible: false,
      introContent: '',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        placeId: null,
        eduPlanId: null,
        tags: null,
        orderByColumn: 'id',
        isAsc: 'desc'
      },
      // schoolForm表单参数
      form: {},
      // 表单校验
      rules: {
    
        name: [
          { required: true, message: '请输入大学名称', trigger: 'blur' }
        ],
        eduPlanId: [
          { 
            required: true, 
            validator: (rule, value, callback) => {
              if (value === null || value === undefined || value === '') {
                callback(new Error('请选择培养计划'))
              } else {
                callback()
              }
            }, 
            trigger: 'change' 
          }
        ],
        placeId: [
          { 
            required: true, 
            validator: (rule, value, callback) => {
              if (value === null || value === undefined || value === '') {
                callback(new Error('请选择所在地区'))
              } else {
                callback()
              }
            }, 
            trigger: 'change' 
          }
        ],
        endDate: [
          { required: true, message: '请选择申请截止日期', trigger: 'change' }
        ],
        documents: [
          { required: true, message: '请输入申请材料要求', trigger: 'blur' }
        ],
        intro: [
          { required: true, message: '请输入简介', trigger: 'blur' }
        ],
        // logo: [
        //   { required: true, message: '请上传Logo', trigger: 'change' }
        // ],
        pics:[
          {
            required: true,
            message: '请上传图片',
            trigger: 'change'
          }
        ],
       tags: [
  { 
    validator: (rule, value, callback) => {
      if (value && value.length > 500) {
        callback(new Error('标签内容不能超过500个字符'))
      } else if (value && value.includes('，')) {
        callback(new Error('请使用英文逗号“,”分隔标签，不能使用中文逗号“，”'))
      } else {
        callback()
      }
    }, 
    trigger: 'blur' 
  }
]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    chooseExcel() {
      this.$refs.excelInput.click()
    },
     async handleFileChange(e) {
      const file = e.target.files[0]
      if (!file) return
      const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      if (!isExcel) {
        this.$message.error('只能上传Excel文件！')
        e.target.value = ""
        return
      }
      const formData = new FormData()
      formData.append("file", file)
      try {
        const res = await importSchoolsExcel(formData)
        if (res.code === 200) {
          this.$message.success("导入成功")
          this.getList()
        } else {
          this.$message.error(res.msg || "导入失败")
          console.error('导入失败:', res.code)
        }
      } catch (e) {
        this.$message.error("导入失败")
        console.error('导入异常:', res.code)
      }
      e.target.value = ""
    },
    async importPics(){
        const res = await importSchoolPics()
    },
    openIntroEditor() {
      //console.log('打开简介编辑器，当前简介内容:', this.form.intro)
      this.introEditorVisible = true
      // 可根据实际需求初始化内容
      //console.log(" this.introContent"+ this.introContent)
       this.introContent = this.form.intro || ''
    },
    saveIntro() {
    //   console.log('保存简介内容:', this.introContent)
      // 保存内容到表单
      this.form.intro = this.introContent
      this.introEditorVisible = false
     
      //this.$message.success('简介已保存')

    },
    /** 查询大学信息列表展示列表 */
    getList() {
      this.loading = true
      listSchools(this.queryParams).then(response => {
        // 确保开关字段的数据类型正确
        this.schoolsList = (response.rows || []).map(item => ({
          ...item,
          isHot: item.isHot !== null && item.isHot !== undefined ? Number(item.isHot) : 0,
          isShow: item.isShow !== null && item.isShow !== undefined ? Number(item.isShow) : 0,
          placeId: item.placeId !== null && item.placeId !== undefined ? Number(item.placeId) : null,
          eduPlanId: item.eduPlanId !== null && item.eduPlanId !== undefined ? Number(item.eduPlanId) : null,
          tags: item.tags !== null && item.tags !== undefined ? item.tags : ''
        }))
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        intro: null,
        pics: null,
        logo: null,
        isHot: 0,  // 默认为0而不是null
        documents: null,
        endDate: null,
        orderNum: null,
        placeId: null,
        eduPlanId: null,
        isShow: 0,  // 默认为0而不是null
        tags: '',
        cityName:'',
        website:''
      }
      // 重置状态
      this.activeTabName = '0'
      this.schoolId = 0
      this.resetForm("form")
      // 确保在下一个tick清除校验状态
      this.$nextTick(() => {
        if (this.$refs["form"]) {
          this.$refs["form"].clearValidate()
        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        name: null,
        placeId: null,
        eduPlanId: null,
        tags: null,
        orderByColumn: 'id',
        isAsc: 'desc'
      }
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "添加大学信息列表展示"
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.introContent = ''
      this.reset()
      const id = row.id || this.ids
      getSchools(id).then(response => {
        // 确保从后端获取的数据类型正确
        this.form = {
          ...response.data,
          id: Number(response.data.id),
          isHot: response.data.isHot !== null && response.data.isHot !== undefined ? Number(response.data.isHot) : 0,
          isShow: response.data.isShow !== null && response.data.isShow !== undefined ? Number(response.data.isShow) : 0,
          orderNum: response.data.orderNum !== null ? Number(response.data.orderNum) : null,
          placeId: response.data.placeId !== null ? Number(response.data.placeId) : null,
          eduPlanId: response.data.eduPlanId !== null ? Number(response.data.eduPlanId) : null,
          tags: response.data.tags !== null && response.data.tags !== undefined ? response.data.tags : '',
          website: response.data.website !== null && response.data.website !== undefined ? response.data.website : ''
        }
        //console.log('表单数据设置完成，tags字段值:', this.form.tags)
        this.schoolId = Number(response.data.id)
        this.open = true
        this.title = "修改大学信息列表展示"
        this.introContent = this.form.intro || ''
      }).catch(error => {
        console.error('获取院校信息失败:', error)
        this.$modal.msgError("获取数据失败: " + (error.msg || error.message || "未知错误"))
      })
    },
    /** 提交基本信息表单 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 确保数据类型正确，避免JSON解析错误
          const submitData = {
            ...this.form,
            id: this.form.id ? Number(this.form.id) : null,
            isHot: this.form.isHot !== null && this.form.isHot !== undefined ? Number(this.form.isHot) : 0,
            isShow: this.form.isShow !== null && this.form.isShow !== undefined ? Number(this.form.isShow) : 0,
            orderNum: this.form.orderNum ? Number(this.form.orderNum) : null,
            placeId: this.form.placeId ? Number(this.form.placeId) : null,
            eduPlanId: this.form.eduPlanId ? Number(this.form.eduPlanId) : null,
            tags: this.form.tags !== null && this.form.tags !== undefined ? this.form.tags : '',
            cityName: this.form.cityName !== null && this.form.cityName !== undefined ? this.form.cityName : '',
            website: this.form.website !== null && this.form.website !== undefined ? this.form.website : '',
            intro: this.form.intro !== null && this.form.intro !== undefined ? this.form.intro : ''
          }
          
          // console.log('提交院校数据前数据类型检查:', {
          //   id: { value: submitData.id, type: typeof submitData.id },
          //   placeId: { value: submitData.placeId, type: typeof submitData.placeId },
          //   eduPlanId: { value: submitData.eduPlanId, type: typeof submitData.eduPlanId },
          //   isHot: { value: submitData.isHot, type: typeof submitData.isHot },
          //   isShow: { value: submitData.isShow, type: typeof submitData.isShow },
          //   tags: { value: submitData.tags, type: typeof submitData.tags, length: submitData.tags ? submitData.tags.length : 0 }
          // })
          // console.log('完整提交数据:', submitData)
          // console.log('表单原始tags值:', this.form.tags)

          if (submitData.id != null) {
            updateSchools(submitData).then(response => {
              this.$modal.msgSuccess("保存成功")
              this.schoolId = Number(submitData.id)
              //console.log('更新后schoolId:', this.schoolId)
              this.getList() // 刷新主列表
              // 不关闭弹出框，让用户继续操作其他标签页
            }).catch(error => {
              console.error('更新院校信息失败:', error)
              this.$modal.msgError("保存失败: " + (error.msg || error.message || "未知错误"))
            })
          } else {
            addSchools(submitData).then(response => {
              this.$modal.msgSuccess("保存成功")
              // 尝试多种方式获取新ID
              let newId = null
              if (response.data && typeof response.data === 'object') {
                newId = response.data.id || response.data
              } else {
                newId = response.id || response.data || response
              }
              
              if (newId) {
                this.form.id = Number(newId)
                this.schoolId = Number(newId)
                //console.log('新增后schoolId:', this.schoolId, '响应数据:', response)
              } else {
                console.error('无法获取新增记录的ID，响应数据:', response)
                this.$modal.msgError("保存成功但无法获取ID，请刷新页面")
              }
              this.getList() // 刷新主列表
              // 不关闭弹出框，让用户继续操作其他标签页
            }).catch(error => {
              console.error('新增院校信息失败:', error)
              this.$modal.msgError("保存失败: " + (error.msg || error.message || "未知错误"))
            })
          }
        }
      })
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除大学信息列表展示编号为"' + ids + '"的数据项？').then(function() {
        return delSchools(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {})
    },
    /** 导出按钮操作 */
   handleExport() {
  this.$confirm('确定要导出当前数据吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    this.download('degree/schools/export', {
      ...this.queryParams
    }, `schools_${new Date().getTime()}.xlsx`)
  }).catch(() => {
    // 用户取消，无需处理
  })
},
    toggleHot(row) {
      const oldValue = row.isHot === 1 ? 0 : 1;
      toggleHot(row.id).then(res => {
        if(res.code === 200) {
          this.$modal.msgSuccess("切换成功")
        } else {
          this.$modal.msgError(res.msg || "切换失败")
          row.isHot = oldValue;
        }
      }).catch(() => {
        row.isHot = oldValue;
      })
    },
    toggleShow(row) {
      const oldValue = row.isShow === 1 ? 0 : 1;
      toggleShow(row.id).then(res => {
        if(res.code === 200) {
          this.$modal.msgSuccess("切换成功")
        } else {
          this.$modal.msgError(res.msg || "切换失败")
          row.isShow = oldValue;
        }
      }).catch(() => {
        row.isShow = oldValue;
      })
    },
    /** 标签页切换处理 */
    handleTabClick(tab, event) {
      // 如果点击的不是基本信息标签页，且schoolId为0或null，则阻止切换并提示
      if (tab.name !== '0' && (!this.schoolId || this.schoolId === 0)) {
        this.$modal.msgWarning("请先保存基本信息")
        // 阻止事件传播和默认行为，完全不允许切换
        event.stopPropagation()
        event.preventDefault()
        return false
      }
    },
    
    /** 标签页离开前拦截 */
    handleBeforeLeave(activeName, oldActiveName) {
      // 如果当前在基本信息页且schoolId为0，则不允许切换到其他页面
      if (oldActiveName === '0' && activeName !== '0' && (!this.schoolId || this.schoolId === 0)) {
        this.$modal.msgWarning("请先保存基本信息")
        return false
      }
      return true
    },
  }
}
</script>

<style scoped>
.school-base-form .el-form-item__label {
  color: #e53935;
  font-weight: 500;
}

/* 为必填字段添加星号 */
.school-base-form .el-form-item__label::before {
  content: '*';
  color: #e53935;
  margin-right: 4px;
}
.required-label {
  color: #e53935;
  margin-right: 2px;
}
.upload-tip {
  color: #888;
  font-size: 12px;
  margin-top: 2px;
}
.form-footer {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.tab-disabled-tip {
  padding: 40px 20px;
  text-align: center;
}
/* 禁用状态的标签页样式 - 完全禁止交互 */
::v-deep .el-tabs__item.is-disabled {
  color: #c0c4cc !important;
  cursor: not-allowed !important;
  background-color: #f5f7fa !important;
  pointer-events: none !important; /* 完全禁用所有鼠标事件 */
  opacity: 0.5 !important;
  position: relative !important;
  border-color: #e4e7ed !important;
}

/* 动态禁用样式 - 基于schoolId状态 */
::v-deep .el-tabs__item[aria-controls*="pane-1"],
::v-deep .el-tabs__item[aria-controls*="pane-2"] {
  transition: all 0.3s ease;
}

/* 当schoolId为0时，禁用院校专业和院校视频标签页 */
::v-deep .school-dialog-0 .el-tabs__item[aria-controls*="pane-1"],
::v-deep .school-dialog-0 .el-tabs__item[aria-controls*="pane-2"] {
  color: #c0c4cc !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  background-color: #f5f7fa !important;
}

/* 禁用状态标签页的hover效果 */
::v-deep .school-dialog-0 .el-tabs__item[aria-controls*="pane-1"]:hover,
::v-deep .school-dialog-0 .el-tabs__item[aria-controls*="pane-2"]:hover {
  color: #c0c4cc !important;
  background-color: #f5f7fa !important;
  cursor: not-allowed !important;
}

/* 为禁用标签页添加覆盖层，确保完全无法点击 */
::v-deep .el-tabs__item.is-disabled::before {
  color: #c0c4cc !important;
  background-color: #f5f7fa !important;
  cursor: not-allowed !important;
  border-color: #e4e7ed !important;
}

/* 确保禁用标签页内的所有元素都无法点击 */
::v-deep .el-tabs__item.is-disabled * {
  pointer-events: none !important;
  color: #c0c4cc !important;
}

/* 弹出框高度设置 */
::v-deep .school-dialog {
  height: 90vh;
}

::v-deep .school-dialog .el-dialog__body {
  height: calc(90vh - 120px);
  overflow-y: auto;
  padding: 20px;
}

/* 禁用标签页标签文字样式 */
.tab-disabled-label {
  color: #c0c4cc !important;
  cursor: not-allowed !important;
}

/* 正常标签页样式保持可交互 */
::v-deep .el-tabs__item:not(.is-disabled) {
  pointer-events: auto;
}

/* 进一步确保整个禁用区域的样式统一 */
::v-deep .el-tabs__item.is-disabled .el-tooltip {
  pointer-events: none !important;
}

::v-deep .el-tabs__item.is-disabled * {
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* 保存成功后的标签页激活样式 */
::v-deep .el-tabs__item:not(.is-disabled) {
  transition: all 0.3s ease;
  cursor: pointer;
}

/* 标签显示样式 */
.tags-display {
  font-size: 12px;
  color: #606266;
  word-break: break-all;
  line-height: 1.4;
}
</style>
